import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form, Popconfirm, Switch, message, Button } from 'antd'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
import Authorized from 'components/common/authorized'

import PropTypes from 'prop-types'
import AddModal from './com/addModal'
import EditModal from './com/editModal'

import Style from './list.css'

class List extends Component {
  static propTypes = {
    department: PropTypes.object,
    departmentList: PropTypes.array,
    getDepartment: PropTypes.func,
    getDepartmentList: PropTypes.func,
    updateDepStatusRequest: PropTypes.any,
    delDepartmentRequest: PropTypes.any,
    updateDepStatus: PropTypes.any,
    delDepartment: PropTypes.any,
    createDepRequest: PropTypes.any,
    createDep: PropTypes.func,
    editDept: PropTypes.func,
    confirmEditLoading: PropTypes.bool,
    confirmAddLoading: PropTypes.bool
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      params: {},
      showAddModal: false,
      showEditModal: false
    }
    this.handleUpdate = this.handleUpdate.bind(this)
  }

  getTableCols () {
    return [
      {
        title: '部门名称',
        dataIndex: 'deptName',
        key: 'deptName',
        width: 100
      },
      {
        title: '职能描述',
        dataIndex: 'remark',
        key: 'remark',
        width: 100

      },
      {
        title: '成员数量',
        dataIndex: 'count',
        key: 'count',
        width: 100

      },
      {
        title: '添加时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        sorter: (a, b) => a.createTime - b.createTime
      },
      {
        title: '是否启用',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        render: (text, row) => <Switch defaultChecked={text === 1} onChange={(e) => this.handleUpdate(row.deptId, e)} />
      },
      {
        title: '操作',
        dataIndex: 'a',
        key: 'a',
        render: (text, record) => {
          return <>
            <div>
              {/* <a className={Style['a-btn']} onClick={() => this.handleRestore(record.userId)}>权限设置</a> */}
              <a className={Style['a-btn']} onClick={() => this.handleEdit(record)}>编辑</a>
              <Authorized auth='SETTING:RULES:DEPT:DEL'>
                <Popconfirm placement='top' title='确认是否删除部门' onConfirm={() => this.handleDelete(record.deptId)}>
                  <a className={Style['a-btn']}>删除</a>
                </Popconfirm>
              </Authorized>
            </div>
          </>
        },
        width: 100
      }
    ]
  }

  reset = () => {
    this.setState({
      pageNo: 1,
      pageSize: 20
    })
    this.props.getDepartment({
      pageNo: 1,
      pageSize: 20
    })
  }

  search = (values = {}) => {
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    this.props.getDepartment(values)
  }

  onPageChange = (pageNo, pageSize) => {
    const { params } = this.state
    params.pageNo = pageNo
    params.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getDepartment(params)
  }

  onShowSizeChange = (current, pageSize) => {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
    this.props.getDepartment(params)
  }

  handleDelete = (id) => {
    this.props.delDepartment({
      deptId: id
    })
  }

  handleUpdate (id, value) {
    this.props.updateDepStatus({
      deptId: id,
      status: value ? 1 : 0
    })
  }

  handleAdd = () => {
    this.setState({
      showAddModal: true
    })
  }

  handleEdit = (row) => {
    // TODO 显示编辑
    this.setState({
      currentRow: row,
      showEditModal: true
    })
  }

  handleAddCancel = () => {
    this.setState({
      showAddModal: false
    })
  }

  handleEditOk = (form) => {
    console.log('handleEditOk -> form', form)
    const { currentRow } = this.state

    this.props.editDept({
      deptId: currentRow.deptId,
      ...form
    }).then(() => {
      this.setState({
        showEditModal: false
      })
      this.reset()
    })
  }

  handleEditCancel = () => {
    this.setState({
      showEditModal: false
    })
  }

  handleAddOk = (values) => {
    this.props.createDep(values).then(() => {
      message.success('添加成功')
      this.setState({
        showAddModal: false
      })
      this.reset()
    })
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getDepartment({
      pageSize,
      pageNo
    })
    this.props.getDepartmentList()
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.delDepartmentRequest && nextProps.delDepartmentRequest) {
      message.success('删除成功')
      this.search()
    }
    if (!this.props.updateDepStatusRequest && nextProps.updateDepStatusRequest) {
      message.success('修改成功')
      this.search()
    }
    if (!this.props.createDepRequest && nextProps.createDepRequest) {
      message.success('修改成功')
      this.search()
    }
  }

  render () {
    const { pageNo, pageSize, showAddModal, showEditModal, currentRow } = this.state
    const { department, departmentList, confirmEditLoading, confirmAddLoading } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: department && department.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange

    }
    return (
      <>
        <ContentBox>
          <div >
            <div className={Style['table-title']}>
              <div className={Style['title']}>数据列表</div>
              <Button type='primary' onClick={this.handleAdd}>添加</Button>
            </div>
            <CustomTable loading={!department} columns={this.getTableCols()} dataSource={(department && department.list) || []} pagination={pagination} />
            <AddModal handleAddOk={this.handleAddOk} confirmLoading={confirmAddLoading} handleAddCancel={this.handleAddCancel} showAddModal={showAddModal} departmentList={departmentList} />
            <EditModal handleEditOk={this.handleEditOk} confirmLoading={confirmEditLoading} handleEditCancel={this.handleEditCancel} showEditModal={showEditModal} data={currentRow} />

          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  department: state.setup.department,
  updateDepStatusRequest: state.setup.updateDepStatusRequest,
  delDepartmentRequest: state.setup.delDepartmentRequest,
  createDepRequest: state.setup.createDepRequest,
  departmentList: state.setup.departmentList,
  confirmEditLoading: state.loading.effects.setup.editDept,
  confirmAddLoading: state.loading.effects.setup.createDep
})
const mapDispatch = dispatch => ({
  getDepartment: dispatch.setup.getDepartment,
  getDepartmentList: dispatch.setup.getDepartmentList,
  updateDepStatus: dispatch.setup.updateDepStatus,
  delDepartment: dispatch.setup.delDepartment,
  createDep: dispatch.setup.createDep,
  editDept: dispatch.setup.editDept
})
const FormList = Form.create()(List)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormList)
)
